<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :title="$attrs.title" ref="userManageEdit" width="1000" :escClosable="true"
                 height="380" :saveFlag="false"  :closeFlag="false" :fullscreen="true" :loading="loading">
      <template slot="body">
        <el-row :gutter="16" style="width: 100%">
          <el-col :span="16">
            <el-card>
              <div ref="textDiv">
                <div v-for="item in msData">
                  <h2 class="hClass">{{item.title}}</h2>
                  <div class="textDiv">
                    <span v-html="formData[item.value]"></span>
                  </div>
                </div>
              </div>
              <h2 class="hClass">解决方案</h2>
              <el-radio-group style="margin-top: 10px" v-model="formData.Status" @change="changeStatus"
                              size="medium">
                <el-radio-button v-for="(item) in statusList('TEST_STATUS')" @click.native="changeStatus(item.DictId)"
                                 :label="item.DictId" :key="item.DictId">{{item.DictName}}</el-radio-button>
              </el-radio-group>
              <el-radio-group style="margin-top: 10px" v-model="formData.Bussconfirmstatus" @change="changeStatus1" size="medium">
                <el-radio-button v-if="btnPermissionUtil.getBtnbtnPermission('test-view-buss-confirm') && formData.Status=== '40'" label="101">业务确认</el-radio-button>
                <el-radio-button v-if="btnPermissionUtil.getBtnbtnPermission('test-view-need-confirm') && formData.Status=== '40'" label="102">客户确认</el-radio-button>
              </el-radio-group>
            </el-card>
            <div style="height: 10px"></div>
            <el-card v-if="formData.Taskid && formData.Taskid !== '0'">
              <h2 class="hClass">附件下载</h2>
              <div>
                <a :href="formData.Attachment" target="_blank">附件预览</a>
              </div>
            </el-card>
            <div style="height: 10px"></div>
            <el-card>
              <h2 class="hClass" style="display: inline-block; margin-right: 10px">评论</h2>
              <vxe-button type="text" status="success" content="添加评论" @click="addComentBtn"></vxe-button>
              <div class="coment" ref="coment">
                <div v-for="(item, index) in commentList" :key="index">
                  <div v-if="item.Comment.length > 0" class="coment-item">
                    <span v-html="item.Comment"></span>
                    <div style="text-align: end; margin: 0 10px 0 0"> {{`${item.UserName}在${formatDateStringFun(item.Created)}发表了评论`}}</div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <div style="width: 20px"></div>
          <el-col :span="8">
            <el-card class="rightSpan">
              <el-row v-for="item in typeItem" :key="item.title">
                <el-col :span="4">
                  <span>{{item.title}}</span>
                </el-col>
                <el-col :span="19" :offset="1">
                  <span>{{item.format(formData)}}</span>
                </el-col>
              </el-row>
            </el-card>
            <div style="height: 10px"></div>
            <el-card>
              <h2 class="hClass">历史记录</h2>
              <ul style="margin-left: 20px;font-size: 16px">
                <li v-for="(item, index) in historyList" :key="index" style="margin: 5px 0">
                  <div>
                    <span>{{formatDateStringFun(item.Created)}}</span>
                    <span v-html="`&nbsp${item.Note}`"></span>
<!--                    <span>{{statusFilterOptions(item.Status, 'TEST_STATUS')}}</span>-->
                  </div>
                </li>
              </ul>
            </el-card>
          </el-col>
        </el-row>
      </template>
    </dialog-edit>
    <task-edit-dialog :visible.sync="taskEditDialogVisible" :taskEditDialogType="taskEditDialogType" title="解决方案"
                      :preFormData="dialogFormData" @saveClose="saveClose"></task-edit-dialog>
    <bigImage :visible.sync="bigImageVisible" :src="bigImageSrc"></bigImage>
<!--    <el-image-->
<!--        style="width: 100px; height: 100px"-->
<!--        :src="url"-->
<!--        :preview-src-list="srcList">-->
<!--    </el-image>-->
  </div>
</template>

<script>
  import dialogEdit from '@/components/element/dialogEdit'
  import projectTestApi from "@/api/projectTestApi";
  import tipTap from "@/components/element/tipTap";
  import bigImage from "@/components/element/bigImage";
  import {mapGetters} from "vuex";
  import { formatDateString } from '@/utils/date'
  import TaskEditDialog from "@/page/ProjectManage/modules/task/TaskEditDialog";

  export default {
    components: {
      dialogEdit,
      TaskEditDialog,
      tipTap,
      bigImage
    },
    computed: {
      formatDateStringFun () {
        return (d) => {
          return formatDateString(d * 1000, 'yyyy-MM-dd hh:mm:ss')
        }
      },
      dialogVisible: {
        get: function () {
          return this.visible
        },
        set: function (value) {
          this.$emit('update:visible', value)
        }
      },
      ...mapGetters(['dictionary']),
      statusList() {
        return (DictTypeCode) => {
          return this.dictionary.filter(item => item.DictTypeCode === DictTypeCode)
        }
      },
      statusFilterOptions() {
        return (cellValue, DictTypeCode) => {
          let filter = this.statusList(DictTypeCode).filter(it => it.DictId === (cellValue||'').toString())
          if (filter.length > 0) {
            return filter[0].DictName
          }
          return ''
        }
      }
    },
    props: {
      visible: {
        type: Boolean,
        default() {
          return false;
        }
      },
      formData: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    data() {
      return {
        bigImageSrc: '',
        bigImageVisible: false,
        taskEditDialogType: '',
        Status: '',
        dialogFormData: {},
        taskEditDialogVisible: false,
        loading: false,
        activeNames: ['1', '2'],
        msData: [
          {
            title: '反馈描述',
            value: 'Desc'
          },
          {
            title: '根本原因',
            value: 'RootCause'
          },
          {
            title: '直接原因',
            value: 'DirectCause'
          },
          {
            title: '对应策略',
            value: 'CorrespondingStrategy'
          },
          {
            title: '规避策略',
            value: 'EvasiveStrategy'
          }
        ],
        typeItem: [
          {
            title: '反馈编号',
            format: (item) => {
              return item.Id
            },
          },
          {
            title: '任务编号',
            format: (item) => {
              return item.Taskid
            },
          },
          {
            title: '反馈标题',
            format: (item) => {
              return item.Name
            },
          },
          {
            title: '分类',
            format: (item) => {
              return this.statusFilterOptions((item.Type), 'TEST_TYPE')
            },
          },
          {
            title: '优先级',
            format: (item) => {
              return this.statusFilterOptions(item.Level|'', 'LEVEL')
            },
          },
          // {
          //   title: '状态',
          //   format: (item) => {
          //     return this.statusFilterOptions(this.Status.toString()|'', 'TEST_STATUS')
          //   },
          // },
          {
            title: '指派人',
            format: (item) => {
              return item.Acceptrealname
            },
          },
          {
            title: '完成者',
            format: (item) => {
              return item.Completerealname
            },
          },
          {
            title: '操作系统',
            format: (item) => {
              return item.Os
            },
          },
          {
            title: '浏览器',
            format: (item) => {
              return item.Browser
            },
          },
          {
            title: '反馈环境',
            format: (item) => {
              if (item.hasOwnProperty('Env')) {
                return this.statusFilterOptions(item.Env.toString(), 'ENV')
              } else {
                return ''
              }
            },
          },
          {
            title: '预计工时',
            format: (item) => {
              return (item.Estimatedtasktime || '0') + '时'
            },
          },
          {
            title: '实际工时',
            format: (item) => {
              return (item.Actualtasktime || '0') + '时'
            },
          }
        ],
        components: [
          {
            label: '名称',
            span: 24,
            placeholder: '请输入名称',
            prop: 'Name',
            value: 'Name',
            componentName: 'vxe-input'
          },
          {
            label: '描述',
            span: 24,
            placeholder: '请输入描述',
            prop: 'Summary',
            value: 'Summary',
            componentName: 'vxe-textarea',
            autosize: {
              minRows: 10
            }
          }
        ],
        historyList: [],
        commentList: [],
        commentValue: {
          Comment: ''
        },
        formRules: {
          Comment: [{required: true, message: '请勿添加空评论', trigger: 'change'}]
        }
      }
    },
    methods: {
      // 给所图片添加点击放大事件
      showBigImg (ref) {
        if (this.$refs[ref]) {
          let a = this.$refs[ref].getElementsByTagName('img')
          console.log(a)
          Array.prototype.slice.call( a ).forEach((item, index) => {
            item.addEventListener('click', () => {
              let src = item.getAttribute('src')
              if (!!src) {
                this.bigImageSrc = item.getAttribute('src')
                this.bigImageVisible = true
              }
            })
          })
        }
      },
      // 添加评论
      addComentBtn () {
        this.taskEditDialogType = 'add'
        this.dialogFormData = JSON.parse(JSON.stringify(Object.assign(this.formData, {
          id: this.formData.Id
        })))
        this.taskEditDialogVisible = true
      },
      submitComment() {
        // todo 没有接口
      },
      changeStatus1 (Status) {
        console.log(Status)
        if (Status === '31' || Status === '30' || Status === '41') {
          this.taskEditDialogType = 'edit'
        } else {
          this.taskEditDialogType = 'add'
        }
        this.dialogFormData = JSON.parse(JSON.stringify(Object.assign(this.formData, {
          id: this.formData.Id
        })))
        this.dialogFormData.Status = Status
        projectTestApi.bussStatus(this.dialogFormData).then(res => {
          if (res.code === 1) {
            this.$XModal.message({ message: res.message, status: 'success' })
          } else {
            this.$XModal.message({ message: res.message, status: 'warning' })
          }
        })
      },
      changeStatus(Status) {
        console.log(Status)
        if (Status === '31' || Status === '30' || Status === '41') {
          this.taskEditDialogType = 'edit'
        } else {
          this.taskEditDialogType = 'add'
        }
        this.dialogFormData = JSON.parse(JSON.stringify(Object.assign(this.formData, {
          Status,
          id: this.formData.Id
        })))
        this.taskEditDialogVisible = true
      },
      getHistoryList() {
        let query = {
          id: this.formData.Id
        }
        projectTestApi.getHistory(query).then(res => {
          if (res && res.length !== 0) {
            this.historyList = res.reverse()
            this.historyList.forEach(it => {
              it.Note = it.Note.replace('<br>', '')
            })
          } else {
            this.historyList = []
          }
        })
      },
      getCommetList() {
        let query = {
          id: this.formData.Id
        }
        projectTestApi.getComment(query).then(res => {
          if (res && res.length !== 0) {
            this.commentList = res
            this.$nextTick(_ => {
              this.showBigImg('coment')
            })
          } else {
            this.commentList = []
          }
          this.loading = false
        })
      },
      saveClose (formData) {
        this.Status = this.formData.Status
        this.formData = Object.assign(this.formData, formData)
        this.getHistoryList()
        this.getCommetList()
        this.$emit('saveClose')
      }
    },
    watch: {
      'visible': {
        handler(val) {
          if (val) {
            this.$nextTick(_ => {
              this.showBigImg('textDiv')
            })
            this.Status = this.formData.Status
            this.loading = true
            this.getHistoryList()
            this.getCommetList()
          } else {
            this.bigImageVisible= false
          }
        }
      },
      taskEditDialogVisible: {
        handler (n, o) {
          if (o && !n) {
            if (this.Status !== this.formData.Status) {
              this.formData.Status = this.Status
            }
          }
        }
      }
    }
  }
</script>

<style scoped>
.textDiv >>> img {
  max-width: 100%;
}
  .textDiv {
    width: 100%;
    height: auto;
    min-height: 10px;
    margin: 10px 0;
  }

  .hClass {
    color: #49586e;
    font-size: 20px;
  }

  .rightSpan span {
    font-size: 15px;
  }

  .rightSpan .el-row {
    margin-top: 10px;
  }

  .rightSpan .el-col:nth-child(2n) span {
    color: #65CEA7;
  }
  .coment {
    overflow: auto;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    padding: 20px
  }
  .coment-item {
    border-bottom: 1px dashed #EEEEEE;
    margin: 10px;
    padding: 5px 5px 5px 20px;
    border-radius: 3px;
    position: relative
  }
  .coment-item >>> img {
    max-width: 100%;
  }
</style>
